﻿<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>远程控件在线演示网页</title>
    <script language="javascript" src="jquery-1.6.4.min.js"></script>
    <script language="javascript" src="jquery.md5.js"></script>
    <script language="javascript" src="jquery.json-2.3.min.js?v=201509261"></script>
    <script language="javascript" src="controlengine.js?v=20171204"></script>
    <script language="javascript" src="niuniuremote.js?v=20171204"></script>
    <script type="text/javascript" src="socket.io.js"></script>
    <script language="javascript" src="webtmviewer.js?v=20171204"></script>


    <style type="text/css">
        label {
            font-size: 12px;
        }

        h3 {
            float: right;
            margin: 4px 30px;
            line-height: 40px;
        }

        .log {
            background-color: #eee;
            border: 1px solid #999;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            padding: 2px 20px;
        }

        #snapImg {
            border: 1px solid #666;
            margin-top: 10px;
            height: 650px;
            overflow: auto;
            text-align: center;
        }

        .btn {
            border: 1px solid #3079ED;
            background-color: #498AF4;
            color: #ffffff;
            line-height: 40px;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            padding: 5px 20px;
        }

            .btn:hover {
                background-color: #3B80EE
            }

        .inputtext {
            width: 40px;
        }
    </style>
</head>

<script type="text/javascript">


    $().ready(function(){
		$('#controlstate').html('正在初始化远程组件，请稍候...');
		InitWebTeamViewer();
		myuserid = getCookie("myuserid");
		$("#btnControl").click(function(){
			if(socket == null)
			{
				alert("尚未连接服务器");
				return;
			}
			if($("#peerid").val() == "")
			{
				alert("对方ID不能为空");
				return;
			}
			if($("#peerid").val() == $("#myid").val())
			{
				alert("控制端与服务端的ID不能相同。");
				return;
			}

			if(!remoteControl.isUseful())
			{
				alert("本地控件尚未启动，请先启动");
				return;
			}
			socket.emit("command", {type: eCmd_RequestControl, peerid:myuserid, password:$("#peerpassword").val(), userid:$("#peerid").val()});
        });

		$("#disconnect").click(function(){
            remoteControl.DisConnect();
			if(socket != null && remotingPeerId != '')
			{
				appendInfo("发送结束指令.");
				socket.emit("command", {type: eCmd_StopControl, peerid:myuserid, userid:remotingPeerId});
			}
			startOrStopCheckLoop(false);
        });

	});

</script>
<body>
    <br />
    本页面用于实现一个类似于TeamViewer的远程协助功能，使用方法如下：<br />
    1). 打开页面，会自动初始化控件以及连接服务器（如果远程组件未安装，会有相应提示，请根据相应提示进行操作）；<br />
    2). 连接上服务器后，每个客户端会分配一个唯一的标识ID，请输入要控制的目标机器的标识ID，即可进行远程。<br />
    <font color='red'>3). 请不要在同一台电脑上自己控制自己。</font><br />
    <div style="height:5px;"></div>
    <div id="ctlDiv">

        <br />
        我的ID：<input type="input" readonly="readonly" id="myid" value="">&nbsp;&nbsp;&nbsp;&nbsp;我的密码：<input type="input" readonly="readonly" id="mypassword" value="">&nbsp;<font color="red">*</font>发送给对方，以便他能连接过来<br />
        对方ID：<input type="input" id="peerid" value="">&nbsp;&nbsp;&nbsp;&nbsp;对方密码：<input type="input" id="peerpassword" value="">
        &nbsp;&nbsp;
        <a id="btnControl" href="javascript:void(0);" class="btn">连接对方</a>
        &nbsp;&nbsp;<a id="disconnect" href="javascript:void(0);" class="btn">结束控制</a>  	 <br />

    </div>

    <div class="log" id="status">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div> <br />
    <div class="log" style="padding-left:20px;"><span id="controlstate"></span></div>   	 <br />
    <div class="log" style="padding-left:20px;"><span id="versioninfo"></span></div>   <br />

    <div id="recvcontent">

    </div>
</body>
</html>
